<!DOCTYPE html>
<html>
<head>
<style>
    body {
        height: 2000px;
    }

    .container {
        height: 300px;
        width: 300px;
        border: 4px solid black;
        overflow-y: scroll;
        resize: both;
    }

    .contents {
        height: 1000px;
    }

    .box {
        position: relative;
        z-index: 1;
        height: 100px;
        width: 100px;
        margin: 10px;
        background-color: blue;
    }

    .surface {
        opacity: 0.5;
    }

    #fixed {
        position: fixed;
        z-index: 0;
        background-color: green;
        left: 50px;
        top: 100px;
        height: 200px;
        width: 200px;
    }

    .rotated {
      transform: rotate(5deg);
      will-change: transform;
    }

    .counter-rotated {
      transform: rotate(-9deg);
      will-change: transform;
    }
</style>
</head>
<!--
This test ensures that clipping works correctly with clip children, even if
there are rotations involved.  if this test is working correctly, all rects
should be clipped by their containing overflow scrolling divs (the fixed
position element will have the outer 'counter rotate' div as its containing
block due to the rotation, not the viewport, and will therefore get clipped by
the outer overflow scrolling div, but not the inner.
-->
<body>
    <div class="rotated">
        <div class="surface">
            <div class="box"></div>
            <div class="container">
                <div class="surface counter-rotated">
                    <div class="box"></div>
                    <div class="container">
                        <div id="fixed"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
